@charset "UTF-8";

@import '_reset';
@import '_common';

// 中间
section {
	padding: r(89) 0 r(96);
	width: 100%;
	height: 100%;
	overflow: auto;
	.h_img {
		margin-top: r(10);
		width: 100%;
		height: r(174);
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
			display: none;
		}
	}
	.tab {
		display: flex;
		height: r(88);
		label {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: r(26);
			color: #8b8b8b;
			font-weight: bold;
		}
	}
	.tab {
		margin-top: r(10);
		background-color: #f5f5f5;
		border-bottom: 1px solid #e4e4e4;
	}
	.container_01 {
		display: none;
		width: r(580);
		margin: r(20) auto 0;
		&>p {
			font-size: r(20);
			color: $colorGray;
			line-height: 1.5;
			text-indent: 2em;
			margin-top: r(30);
		}
		video {
			width: 100%;
			border-top: 1px solid #e4e4e4;
			border-bottom: 1px solid #e4e4e4;
			padding: r(30) 0;
			margin: r(20) 0;
		}
		.through {
			.t_header {
				display: flex;
				align-items: center;
				height: r(80);
				font-weight: bold;
				background-color: $color;
				color: white;
				i {
					font-size: r(50);
					width: r(90);
					text-align: center;
				}
				p {
					font-size: r(30);
					width: r(400);
				}
			}
			.t_content {
				display: flex;
				align-items: center;
				height: r(107);
				.img {
					width: r(90);
					height: 100%;
					text-align: center;
					img {
						height: 100%;
					}
				}
				.t_message {
					width: r(400);
					p {
						&:first-child {
							color: black;
							font-size: r(32);
							font-weight: bold;
						}
						&:last-child {
							color: $color;
							font-size: r(20);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				&:nth-child(2n+1) {
					background-color: #f3f3f3;
				}
			}
		}
		.more {
			color: $colorGray;
			font-size: r(18);
			text-align: center;
			border-top: 1px solid #e4e4e4;
			padding: r(20) 0;
		}
	}
	.container_02 {
		display: none;
		width: r(580);
		margin: 0 auto r(40);
		.management {
			display: flex;
			justify-content: space-between;
			margin-top: r(40);
			.photo_img {
				width: r(106);
				height: r(126);
				img {
					width: 100%;
				}
			}
			.m_info {
				width: r(450);
				.name {
					font-size: r(26);
					color: $color;
					font-weight: bold;
					border-bottom: 1px solid pink;
					padding-bottom: r(5);
				}
				.message {
					padding-top: r(5);
					color: $colorGray;
					font-size: r(22);
					text-align: justify;
				}
			}
		}
	}
	#intro:checked ~ .h_img>img:first-child {
		display: block;
	}
	#intro:checked ~ .container_01 {
		display: block;
	}
	#intro:checked ~ .tab>label:nth-child(1) {
		background-color: $color;
		color: white;
	}
	#team:checked ~ .h_img>img:last-child {
		display: block;
	}
	#team:checked ~ .container_02 {
		display: block;
	}
	#team:checked ~ .tab>label:nth-child(2) {
		background-color: $color;
		color: white;
	}
	input[type="radio"] {
		display: none;
	}
}